/**************************************** effect tada ***********************************/
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -6deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -6deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 6deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 6deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -6deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -6deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

button{
margin-left:500px;
}

.fullCouronne
{
-webkit-animation-name: tada;
-webkit-animation-duration: 1s;
animation-name: tada;
display:none;
top:81px;   
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
transition: all 3s ease-out;
position:relative;
margin:auto;

}

.imgContainer{

margin:auto;
width:300px;
height:200px;
overflow:hidden;

}

.couronne1{
opacity:0;
top:200px;
display:block;
position:relative;
margin:auto;
}

.couronne1Move{
opacity:100;
display:block;
top:150px;    
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
transition: all 3s ease-out;
position:relative;
margin:auto;

}

.couronne2{
opacity:0;
display:block;
position:relative;
margin:auto;
top:200px;

}

.couronne2Move{
opacity:100;
display:block;   /* 1+(top couroneMove1-(tailleverticale image1+tailleverticale image2) )*/ 
position:relative;
top:87px;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
transition: all 3s ease-out;
margin:auto;

}

.couronne3{
opacity:0;
display:block;
top:200px;
position:relative;
margin:auto;

}

.couronne3Move{
	opacity:100;
display:block;
top:17px;    /* 1+(top couroneMove2-(tailleverticale image2+tailleverticale image3))*/
position:relative;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
transition: all 3s ease-out;
margin:auto;
}













